<template>
  <div>
    <div class="card" style="margin-bottom: 5px">
      <el-input v-model="keywords" prefix-icon="Search" style="width: 240px; margin-right: 10px"
                placeholder="请输入规则名称查询"></el-input>
      <el-button type="info" plain @click="load">查询</el-button>
      <el-button type="warning" plain style="margin: 0 10px" @click="reset">重置</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
      <el-button plain type="primary" @click="handleAdd">新增规则</el-button>
    </div>

    <div class="card" style="margin-bottom: 5px">
      <el-table stripe :data="priceRuleList">
        <el-table-column prop="ruleName" label="规则名称" />
        <el-table-column prop="price" label="价格">
          <template v-slot="scope">
            ¥{{ scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column prop="description" label="规则描述" />
        <el-table-column prop="createTime" label="创建时间">
          <template v-slot="scope">
            {{dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss')}}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="100" fixed="right">
          <template v-slot="scope">
            <el-button type="primary" circle :icon="Edit" @click="handleEdit(scope.row)"></el-button>
            <el-button type="danger" circle :icon="Delete" @click="del(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="card">
      <el-pagination
          :total="total"
          v-model:current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          @current-change="load" />
    </div>

    <el-dialog title="价格规则" v-model="formVisible" width="50%" destroy-on-close>
      <el-form :model="form" label-width="100px" style="padding: 20px">
        <el-form-item prop="ruleName" label="规则名称">
          <el-input v-model="form.value.ruleName" placeholder="请输入规则名称"></el-input>
        </el-form-item>

        <el-form-item prop="price" label="价格">
          <el-input-number
              v-model="form.value.price"
              :precision="2"
              :step="0.1"
              :min="0"
              placeholder="请输入价格"></el-input-number>
        </el-form-item>

        <el-form-item prop="description" label="规则描述">
          <el-input
              type="textarea"
              v-model="form.value.description"
              placeholder="请输入规则描述"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="formVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, Edit } from "@element-plus/icons-vue";
import { get, post } from "@/net";
import dayjs from "dayjs";

const pagination = reactive({
  pageSize: 3,
  currentPage: 1
})

const keywords = ref("")
const form = reactive({})
const formVisible = ref(false)
const total = ref(0)
const priceRuleList = ref([])

const load = () => {
  get(`/api/priceRule/getPriceRuleList/${pagination.currentPage}?keywords=${keywords.value || ''}`, (res) => {
    total.value = res.total
    priceRuleList.value = res.list
    console.log(res.list)
  }, (err) => {
    ElMessage.warning("获取价格规则失败")
    console.log(err)
  })
}

const reset = () => {
  keywords.value = ''
  load()
}

const handleAdd = () => {
  form.value = {}
  formVisible.value = true
}

const handleEdit = (row) => {
  form.value = row
  formVisible.value = true
}

const update = () => {
  post(`/api/priceRule/updatePriceRule`, form.value, (res) => {
    ElMessage.success("修改成功")
    formVisible.value = false
    load()
  }, (err) => {
    ElMessage.warning("修改失败")
    console.log(err)
  })
}

const add = () => {
  post(`/api/priceRule/addPriceRule`, form.value, (res) => {
    ElMessage.success("添加成功")
    formVisible.value = false
    load()
  }, (err) => {
    ElMessage.warning("添加失败")
    console.log(err)
  })
}

const save = () => {
  form.value.id ? update() : add()
}

const del = (id) => {
  ElMessageBox.confirm('删除后数据无法恢复，您确定删除吗？', '删除确认', {
    type: 'warning',
    confirmButtonText: '确认删除',
    cancelButtonText: '取消',
  }).then(() => {
    post(`/api/priceRule/deletePriceRule/${id}`, null, (res) => {
      ElMessage.success("删除成功")
      load()
    }, (err) => {
      ElMessage.warning("删除失败")
      console.log(err)
    })
  }).catch(err => {
    console.error(err)
  })
}

onMounted(() => {
  load()
})
</script>

<style scoped>
.el-input-number {
  width: 200px;
}
</style>